<template>

    <div class="user-details_box">
        <div style="text-align: center;padding: 10px 0;">接驳点:{{spotInfoData.name}};管理员:{{spotInfoData.admin?spotInfoData.admin.name:'无人'}}</div>
            <!--{{spotInfoData.name}}-->
        <div style="display: flex;justify-content: space-around;">
            <!--<div class="list">{{spotInfoData.coming_orders}}</div>-->
            <!--<div class="list">{{spotInfoData.staying_orders}}</div>-->
            <!--<div class="list">{{spotInfoData.leaving_orders}}</div>-->
            <div class="list">
                <div class="list-title">即将到达({{spotInfoData.coming_orders?spotInfoData.coming_orders.length:0}})</div>
                <div class="list-body" v-for="item in spotInfoData.coming_orders" @click="toSeeOrderDetail(item.id)">{{item.full_dingdong}}</div>
            </div>
            <div class="list">
                <div class="list-title">当前未指派({{spotInfoData.staying_orders?spotInfoData.staying_orders.length:0}})</div>
                <div class="list-body" v-for="item in spotInfoData.staying_orders"  @click="toSeeOrderDetail(item.id)">{{item.full_dingdong}}</div>
            </div>
            <div class="list">
                <div class="list-title">即将离开({{spotInfoData.leaving_orders?spotInfoData.leaving_orders.length:0}})</div>
                <div class="list-body" v-for="item in spotInfoData.leaving_orders"  @click="toSeeOrderDetail(item.id)">{{item.full_dingdong}}</div>
            </div>
        </div>
    </div>

</template>
<script>
    export default {
        name: 'spot-info',
        components: {
        },
        props: {
            spotInfo: {
                type: Object,
                default: () => {
                    return {}
                }
            }
        },
        data() {
            return {
            }
        },
        computed: {
            spotInfoData: function (value) {
                return this.spotInfo;
            }
        },
        methods: {
            toSeeOrderDetail(id) {
                this.$router.push({path:'/dialog/show/express.order/' + id})
            }
        }
    }
</script>

<style lang="less">
    .user-details_box{
        .el-step__description{
            font-size: 14px !important;
        }
        .el-steps--vertical{
            width: 40%;
        }
    }

</style>
<style scoped lang="less">
    .user-details_box {
        display: flex;
        flex-direction: column;
        .list{
            width: 200px;
            min-height: 200px;
            box-sizing: border-box;
            padding: 0 20px;
            /*height: 300px;*/
            border-radius: 6px;
            border: 1px solid #eee;
            .list-title{
                text-align: center;
                padding: 10px 0;
            }
            .list-body{
                text-align: center;
                padding: 10px 0;
                color: #000;
                border-radius: 4px;
                /*background-color: #1b6d85;*/
                border: 1px solid #ccc;
                margin-bottom: 6px;
            }
            .list-body:hover{
                cursor: pointer;
                border-color: #009688;
                color: #009688;
            }
        }
        .changeedit {
            cursor: pointer;
        }
        .colorchange {
            color: #009688;
            padding-left: 4px;
        }
        .borderbottom {
            padding: 0 41px;

        }
        .tasktitle {
            margin-bottom: 25px;
        }
        .taskorder {
            margin-bottom: 20px;
        }
        .paddingbottom {
            padding-bottom: 10px;
        }
        .order-details_title {
            margin: 0 auto;
        }
        .order-details_h3 {
            font-size: 18px;
            color: #000;
            margin: 7px 0 11px 0px;
        }
        .order-details_content {
            overflow: hidden;
            font-size: 16px;
            .tasklist > li {
                line-height: 30px;
            }
            .mainbotton {
                width: 180px;
                margin-top: 8px;
            }
            .listTitle {
                height: 50px;
                text-align: center;
                line-height: 50px;
                width: 355px;
                background: #EEEEEE;
            }
            .listItem {
                height: 59px;
                border-bottom: 3px solid #eee;
                display: flex;
                .itemimg {
                    width: 26px;
                    height: 26px;
                    margin-top: 17px;
                    margin-left: 10px;
                    margin-right: 20px;
                }
                .item {
                    flex: 1;
                    display: flex;
                    justify-content: space-between;
                }
            }
        }

    }

</style>

